<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>图书商城</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        #page {
            width: 100%;
            margin: 0 auto;
        }
        #top table {
            width: 100%;
        }
        #menu {
            background-color: #1C3F09;
        }
        #menu a {
            color: #ffffff;
            text-decoration: none;
            margin: 0 8px;
        }
        #menu a:last-child {
            color: yellow;
        }
        #search {
            background-color: #B6B684;
            padding: 8px 0;
        }
        #search table {
            width: 100%;
        }
        #search td {
            text-align: right;
            padding-right: 20px;
        }
        #content {
            padding: 15px;
        }
        .breadcrumb {
            text-align: right;
            margin-bottom: 10px;
        }
        #content h1 {
            margin: 15px 0;
        }
        .book-list {
            width: 100%;
            border-collapse: collapse;
        }
        .book-list td {
            text-align: center;
            padding: 15px;
        }
        .book-cover {
            margin-bottom: 10px;
        }
        #bottom {
            background-color: #EFEEDC;
            margin-top: 30px;
        }
        #bottom table {
            width: 100%;
            padding: 15px 0;
        }
    </style>
</head>
<body>
<div id="page">
    <!-- 顶部区域 -->
    <div id="top">
        <table>
            <tr>
                <td width="70%">
                    <img alt="logo" src="images/logo.png" />
                </td>
                <td>
                    <img alt="cart" src="images/cart.gif">
                    <a href="#">购物车</a>|
                    <a href="#">帮助中心</a>|
                    <a href="#">我的账户</a>|
                    <a href="#">新用户注册</a>
                </td>
            </tr>
        </table>
    </div>

    <!-- 菜单区域 -->
    <div id="menu">
        <table width="100%">
            <tr align="center">
                <td>
                    <a href="#">文学</a>
                    <a href="#">生活</a>
                    <a href="#">计算机</a>
                    <a href="#">外语</a>
                    <a href="#">经管</a>
                    <a href="#">励志</a>
                    <a href="#">社科</a>
                    <a href="#">学术</a>
                    <a href="#">少儿</a>
                    <a href="#">艺术</a>
                    <a href="#">原版</a>
                    <a href="#">科技</a>
                    <a href="#">考试</a>
                    <a href="#">生活百科</a>
                    <a href="#">全部商品目录</a>
                </td>
            </tr>
        </table>
    </div>

    <!-- 搜索区域 -->
    <div id="search">
        <table>
            <tr>
                <td>
                    Search
                    <input type="text"/>
                    <input type="button" value="搜索"/>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                </td>
            </tr>
        </table>
    </div>

    <!-- 内容区域 -->
    <div id="content">
        <div class="breadcrumb">
            首页&nbsp;&gt;&nbsp;旅游&nbsp;&gt;&nbsp;图书列表&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        </div>
        <h1>商品目录</h1>
        <hr/>
        <h1>计算机类</h1>
        <span>共xxx种商品</span>
        <hr/>
        <div>
            <img alt="productlist" src="images/productlist.gif" width="100%">
        </div>
        <div>
            <table class="book-list">
                <tr>
                    <td>
                        <div class="book-cover">
                            <img alt="book" src="bookcover/101.jpg">
                        </div>
                        <div>
                            <span>书名:xxx</span><br/>
                            <span>售价:xxx</span>
                        </div>
                    </td>
                    <td>
                        <div class="book-cover">
                            <img alt="book" src="bookcover/102.jpg">
                        </div>
                        <div>
                            <span>书名:xxx</span><br/>
                            <span>售价:xxx</span>
                        </div>
                    </td>
                    <td>
                        <div class="book-cover">
                            <img alt="book" src="bookcover/103.jpg">
                        </div>
                        <div>
                            <span>书名:xxx</span><br/>
                            <span>售价:xxx</span>
                        </div>
                    </td>
                    <td>
                        <div class="book-cover">
                            <img alt="book" src="bookcover/104.jpg">
                        </div>
                        <div>
                            <span>书名:xxx</span><br/>
                            <span>售价:xxx</span>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="book-cover">
                            <img alt="book" src="bookcover/105.jpg">
                        </div>
                        <div>
                            <span>书名:xxx</span><br/>
                            <span>售价:xxx</span>
                        </div>
                    </td>
                    <td>
                        <div class="book-cover">
                            <img alt="book" src="bookcover/106.jpg">
                        </div>
                        <div>
                            <span>书名:xxx</span><br/>
                            <span>售价:xxx</span>
                        </div>
                    </td>
                    <td>
                        <div class="book-cover">
                            <img alt="book" src="bookcover/107.jpg">
                        </div>
                        <div>
                            <span>书名:xxx</span><br/>
                            <span>售价:xxx</span>
                        </div>
                    </td>
                    <td>
                        <div class="book-cover">
                            <img alt="book" src="bookcover/108.jpg" width="130" height="197">
                        </div>
                        <div>
                            <span>书名:xxx</span><br/>
                            <span>售价:xxx</span>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>

    <!-- 底部区域 -->
    <div id="bottom">
        <table>
            <tr>
                <td rowspan="2">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <img alt="logo" src="images/logo.png">
                </td>
                <td>
                    CONTACT US
                </td>
            </tr>
            <tr>
                <td>
                    copyright 2008 &copy; BookStore All Rights RESERVED
                </td>
            </tr>
        </table>
    </div>
</div>
</body>
</html>